import '../index.scss';
import { useRef, useEffect, useState } from 'react';
import { useLayout } from '@/pages/index/hooks/index';
import { useThreejsManage } from '@/pages/index/hooks/useThreejsManage';

const data: { [key: number]: string[] } = {
  1: ['123123123', '22234234', '2342344', 'xdsfw', '2234234'],
  2: ['94ifgud', '6732134', '454gsd', 'ffe125', '2344s3g'],
  3: ['45tgsd', 'swewf', 'wrwese', '1512014', '4566jd4'],
};

export default function LotteryDraw() {
  const [showData, setShowData] = useState<string[]>(data[1]);

  let isSelect = false;
  let index = 1;
  /**
   * 初始化定时器
   */
  const initPage = () => {
    if (!isSelect) {
      setShowData(data[index]);
      index = index + 1 < 3 ? index + 1 : 1;
    }
  };
  const inputRef = useRef(null);
  // 初始化threejs画布和相机
  const { scene, initRenderer, render } = useThreejsManage(inputRef, initPage);
  // 初始化旋转球
  const { initLayout } = useLayout(scene, render);
  initLayout();

  /**
   * 停止，确定中奖名单
   */
  const end = () => {
    isSelect = true;
  };
  useEffect(() => {
    initRenderer();
  }, []);

  return (
    <>
      <div id="container" ref={inputRef}></div>
      <div className="lotter-main">
        <div className="number-list flex justify-center items-center">
          {showData.map((ele) => {
            return <p key={ele}>{ele}</p>;
          })}
        </div>
        <p
          onClick={() => {
            end();
          }}
        >
          停止
        </p>
      </div>
    </>
  );
}
